<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>选择城市</title>
		<link rel="stylesheet" href="../../css/style2016.css" />
	</head>
	<body>
	<div class="container bgF">
		<div class="top">
			<span class="back">返回</span>
			<h1>选择城市</h1>
		</div>
		<div class="selectCity" id="myList">
			<ul class="disNone">
				<li>海西</li><li>果洛</li><li>玉树</li><li>黄南</li><li>海北</li><li>海南</li><li>海东</li><li>西宁</li><li>那曲</li><li>阿里</li><li>昌都</li><li>林芝</li><li>山南</li><li>日喀则信</li><li>拉萨</li><li>崇左</li><li>来宾</li><li>河池</li><li>百色</li><li>贺州</li><li>玉林</li><li>贵港</li><li>钦州</li><li>防城港</li><li>北海</li><li>梧州</li><li>桂林</li><li>柳州</li><li>南宁</li><li>阿拉尔市</li><li>阿勒泰地区</li><li>巴音郭楞州</li><li>塔城地区</li><li>阿克苏</li><li>和田</li><li>喀什</li><li>哈密</li><li>吐鲁番</li><li>博尔塔拉</li><li>克孜勒苏</li><li>昌吉</li><li>巴音郭勒</li><li>伊犁</li><li>克拉玛依</li><li>石河子</li><li>包头</li><li>呼和浩特</li><li>乌海</li><li>赤峰</li><li>呼伦贝尔盟</li><li>阿拉善盟</li><li>哲里木盟</li><li>兴安盟</li><li>乌兰察布盟</li><li>锡林郭勒盟</li><li>巴彦淖尔盟</li><li>伊克昭盟</li><li>通辽</li><li>乌兰浩特市</li><li>鄂尔多斯</li><li>满洲里</li><li>银川</li><li>石嘴山</li><li>吴忠</li><li>固原</li><li>乌鲁木齐</li><li>甘南</li><li>临夏</li><li>庆阳</li><li>平凉</li><li>陇南</li><li>定西</li><li>武威</li><li>张掖</li><li>酒泉</li><li>天水</li><li>白银</li><li>金昌</li><li>嘉峪关</li><li>兰州</li><li>商洛</li><li>安康</li><li>汉中</li><li>榆林</li><li>延安</li><li>渭南</li><li>铜川</li><li>咸阳</li><li>宝鸡</li><li>西安</li><li>临沧</li><li>迪庆</li><li>怒江</li><li>丽江</li><li>德宏</li><li>保山</li><li>西双版纳</li><li>思茅</li><li>文山</li><li>红河</li><li>楚雄</li><li>昭通</li><li>玉溪</li><li>曲靖</li><li>大理</li><li>昆明</li><li>黔东南</li><li>毕节</li><li>黔西南</li><li>铜仁</li><li>安顺</li><li>遵义</li><li>六盘水</li><li>贵阳</li><li>阿坝州</li><li>遂宁</li><li>达州</li><li>资阳</li><li>巴中</li><li>泸州</li><li>凉山</li><li>甘孜</li><li>眉山</li><li>雅安</li><li>达川</li><li>广安</li><li>宜宾</li><li>南充</li><li>乐山</li><li>成都</li><li>绵阳</li><li>德阳</li><li>五指山市</li><li>文昌</li><li>万宁</li><li>内江</li><li>琼海</li><li>广元</li><li>东方市</li><li>攀枝花</li><li>儋州</li><li>自贡</li><li>三亚</li><li>海口</li><li>云浮</li><li>揭阳</li><li>潮州</li><li>清远</li><li>阳江</li><li>河源</li><li>汕尾</li><li>梅州</li><li>惠州</li><li>肇庆</li><li>茂名</li><li>湛江</li><li>江门</li><li>韶关</li><li>佛山</li><li>中山</li><li>东莞</li><li>汕头</li><li>珠海</li><li>深圳</li><li>广州</li><li>张家界</li><li>湘西</li><li>永州</li><li>郴州</li><li>怀化</li><li>娄底</li><li>益阳</li><li>邵阳</li><li>岳阳</li><li>衡阳</li><li>湘潭</li><li>株洲</li><li>常德</li><li>长沙</li><li>鄂州</li><li>孝感</li><li>咸宁</li><li>随州</li><li>仙桃</li><li>天门</li><li>潜江</li><li>恩施</li><li>十堰</li><li>黄冈</li><li>荆门</li><li>黄石</li><li>襄樊</li><li>荆州</li><li>宜昌</li><li>武汉</li><li>济源</li><li>驻马店</li><li>周口</li><li>信阳</li><li>南阳</li><li>商丘</li><li>三峡门</li><li>漯河</li><li>许昌</li><li>濮阳</li><li>焦作</li><li>新乡</li><li>鹤壁</li><li>安阳</li><li>平顶山</li><li>洛阳</li><li>开封</li><li>郑州</li><li>菏泽</li><li>滨州</li><li>聊城</li><li>德州</li><li>临沂</li><li>莱芜</li><li>日照</li><li>咸海</li><li>泰安</li><li>济宁</li><li>潍坊</li><li>烟台</li><li>东营</li><li>枣庄</li><li>淄博</li><li>青岛</li><li>济南</li><li>上饶</li><li>抚州</li><li>宜春</li><li>吉安</li><li>赣州</li><li>新余</li><li>萍乡</li><li>鹰潭</li><li>九江</li><li>景德镇</li><li>南昌</li><li>宁馨</li><li>龙岩</li><li>南平</li><li>漳州</li><li>泉州</li><li>三明</li><li>莆田</li><li>厦门</li><li>福州</li><li>亳州</li><li>宣城</li><li>六安</li><li>阜阳</li><li>巢湖</li><li>淮南</li><li>池州</li><li>宿州</li><li>滁州</li><li>黄山</li><li>安庆</li><li>铜陵</li><li>淮北</li><li>马鞍山</li><li>蚌埠</li><li>芜湖</li><li>合肥</li><li>义乌</li><li>丽水</li><li>台州</li><li>舟山</li><li>衢州</li><li>金华</li><li>绍兴</li><li>湖州</li><li>嘉兴</li><li>温州</li><li>宁波</li><li>杭州</li><li>淮安</li><li>泰州</li><li>宿迁</li><li>无锡</li><li>常州</li><li>连云港</li><li>徐州</li><li>盐城</li><li>扬州</li><li>南通</li><li>苏州</li><li>镇江</li><li>南京</li><li>大兴安岭</li><li>七台河</li><li>伊春</li><li>双鸭山</li><li>黑河</li><li>鸡西</li><li>鹤岗</li><li>绥化</li><li>大庆</li><li>佳木斯</li><li>牡丹江</li><li>齐齐哈尔</li><li>哈尔滨</li><li>延边</li><li>白城</li><li>松原</li><li>白山</li><li>通化</li><li>辽源</li><li>四平</li><li>吉林</li><li>长春</li><li>葫芦岛</li><li>朝阳</li><li>铁岭</li><li>盘锦</li><li>辽阳</li><li>阜新</li><li>营口</li><li>锦州</li><li>丹东</li><li>本溪</li><li>抚顺</li><li>鞍山</li><li>大连</li><li>沈阳</li><li>运城</li><li>临汾</li><li>晋中</li><li>忻州</li><li>吕梁</li><li>朔州</li><li>晋城</li><li>长治</li><li>阳泉</li><li>大同</li><li>太原</li><li>衡水</li><li>沧州</li><li>秦皇岛</li><li>唐山</li><li>廊坊</li><li>承德</li><li>张家口</li><li>保定</li><li>邢台</li><li>邯郸</li><li>石家庄</li><li>重庆</li><li>上海</li><li>天津</li><li>北京</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="../../lib/jquery.js" ></script>
	<script type="text/javascript" src="../../lib/charfirst.pinyin.js" ></script>
	<script>
		//自定义全部整市的对象数组
		var cityArr = [];
		//遍历出列出的城市
		$('#myList li').each(function(){
			var $this = $(this);
			//城市数组方便后期扩展，比如添加链接，可以新增获取这个值写入对象中
			var city = {
				name:$this.html()
			}
			cityArr.push(city);
		});
		//列出所有可能的首字母（26字母）
		var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
		//按首字母存放的内容
		var citySort = {};
		var insetStr = floatStr = '';
		var cityABC = [];
		//循环将内容填入citySort对象中
		for(var i = 0; i < cityArr.length; i++){
			var first = checkCh(cityArr[i].name);
			first = first.length>1?first.substring(0,1):first;
			if(citySort[first] == undefined) citySort[first] = [];
			citySort[first].push(cityArr[i]);
		}
		//按照A-Z顺序先将列表循环输出（同时记录输入了哪些字母用于右侧浮动）
		for(var i =0; i < 26; i++){
			var print = citySort[letters[i]];
			if(citySort[letters[i]]!=undefined){
				cityABC.push(letters[i]);
				insetStr += '<dl id="'+letters[i]+'"><dt><a name="'+letters[i]+'">'+letters[i]+'</a></dt>'
				for(var j = 0; j < print.length; j ++){
					insetStr += '<dd>'+print[j].name+'</dd>'
				}
				insetStr += '</dl>';
			}
		}
		$('#myList').append(insetStr);
		//开始添加右侧浮动（用于快捷选择到相应字母开头的地域）+ 标记出每一块距离顶部的位置以便于下面将字母DL浮动的要求
		var conFloat = {};
		for(var i = 0; i < cityABC.length; i ++){
			conFloat[cityABC[i]] = $('#'+cityABC[i]).offset().top - $('.top').height();
			floatStr += '<a href="#'+cityABC[i]+'" target="_self">'+cityABC[i]+'</a>'
		}
		floatStr = '<p>'+floatStr+'</p>'
		$('#myList').append(floatStr);
		//让右侧浮动条居中显示（配合样式将marginTop向上一半元素实际高度值）
		var $listP = $('#myList p');
		var flexHeight = $listP.height();
		//让右侧浮动垂直居中
		$listP.css('margin-top','-'+flexHeight/2+'px');
		//页面滚动时让正文字母标题浮动
		$(window).scroll(function(){
			//获取滚动条的位置
			var Ctop = $(document).scrollTop();
			//判断三种情况（1）不足第一个高度（2）大于最后一个高度（3）中间高度
			if(Ctop < conFloat[cityABC[0]]){
				$('#myList dl').removeClass('floatLetter');
			}else if(Ctop >= conFloat[cityABC[cityABC.length-1]]){
				$('#'+cityABC[cityABC.length-1]).addClass('floatLetter').siblings().removeClass('floatLetter');
			}else{
				for(var i = 0; i < cityABC.length; i++){
					if(conFloat[cityABC[i+1]] > Ctop && Ctop >= conFloat[cityABC[i]]){
						$('#'+cityABC[i]).addClass('floatLetter').siblings().removeClass('floatLetter');
						break;
					}
				}
			}
		});
		
		
		
		//点击城市
		$('#myList').on('click','dd',function(){
			alert('点击了'+$(this).html());
		});
		
	</script>
	</body>
</html>
